{extend name="base" /}
{block name="main"}
<div class="l-loading" style="display: block" id="htr-loading"></div>
<script type="text/javascript" src="__INDEX__/js/echarts.min.js"></script>
<style>
.tit{text-align:center;height:80px;line-height:80px;font-size:18px;}
.tit img{height:30px;margin:0 80px;vertical-align: middle;}
</style>
<div class="tit"><a href="<?=url('','Y='.$lyear)?>"><img src="__INDEX__/img/l.png"></a>{$year}年度<a href="<?=url('','Y='.$ryear)?>"><img src="__INDEX__/img/r.png"></a></div>
<div id="main" style="width: 100%;height:600px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var app = echarts.init(document.getElementById('main'));
    var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
    ];

    app.configParameters = {
        rotate: {
            min: -90,
            max: 90
        },
        align: {
            options: {
                left: 'left',
                center: 'center',
                right: 'right'
            }
        },
        verticalAlign: {
            options: {
                top: 'top',
                middle: 'middle',
                bottom: 'bottom'
            }
        },
        position: {
            options: echarts.util.reduce(posList, function (map, pos) {
                map[pos] = pos;
                return map;
            }, {})
        },
        distance: {
            min: 0,
            max: 100
        }
    };

    app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
            var labelOption = {
                normal: {
                    rotate: app.config.rotate,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    position: app.config.position,
                    distance: app.config.distance
                }
            };
            myChart.setOption({
                series: [{
                    label: labelOption
                }, {
                    label: labelOption
                }, {
                    label: labelOption
                }]
            });
        }
    };


    var labelOption = {
        normal: {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 10,
            textBorderColor:'transparent',
            rich: {
                name: {
                    color: '#fff'
                }
            }
        }
    };

    option = {
        color: ['#003366', '#006699', '#4cabce'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['传统型', '系统性', '投资型']
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: [
            {
                type: 'category',
                axisTick: {show: false},
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '传统型',
                type: 'bar',
                barGap: 0,
                label: labelOption,
                data: [{$type0}]
            },
            {
                name: '系统性',
                type: 'bar',
                label: labelOption,
                data: [{$type1}]
            },
            {
                name: '投资型',
                type: 'bar',
                label: labelOption,
                data: [{$type2}]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    app.setOption(option);
</script>
{/block}
